<template>
  <div>
    <el-tooltip content="搜一下" effect="dark" placement="bottom">
      <a class="btn_item" @click="visible= true">
        <span class="btn_icon">
        <img alt="" class="btn_img" src="../assets/icons/placesearch.png">
        </span>
        <span class="btn_name">搜索</span>
      </a>
    </el-tooltip>

    <el-dialog
      :modal="false"
      :visible.sync="visible"
      width="30%"
    >
      <div class="input-item-prepend">
        <span class="input-item-text" style="width:10rem;">按关键字搜索，打印详细信息</span>
      </div>
      <el-input v-model="input" placeholder="" @input="onInput"></el-input>
      <vue-json-pretty v-show="data !== ''" :data="data" :deep="2" :virtual="true"></vue-json-pretty>
    </el-dialog>
  </div>
</template>

<script>
import MapData from "../store/MapData";
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";

export default {
  name: "PlaceSearch",
  components: {VueJsonPretty},
  data() {
    return {
      visible: false,
      input: "广电运通",
      data: ""
    }
  },
  methods: {
    onInput() {
      let AMap = MapData.AMap;
      let _this = this;
      AMap.plugin(['AMap.AutoComplete'], function () {
        const auto = new AMap.AutoComplete();
        auto.search(_this.input, function (status, result) {
          if (status !== "error") {
            _this.data = result.tips;
          } else {
            _this.data = "";
          }
        })
      });
    }
  },
  beforeUpdate() {
    this.onInput();
  }
}
</script>

<style scoped>

</style>
